<!--
 * @FilePath     : /study_code/layui/13-2-10.html
 * @Description  : page 配置分页组件
 * @Date         : 2025-04-07 17:14:25
 * @Author       : Fang YingGui
 * @LastEditors  : fangyinggui 18715384437@163.com
 * @LastEditTime : 2025-04-08 14:33:49
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>documentName</title>
    <link rel="stylesheet" href="/layui/dist/css/layui.css" />
  </head>
  <body>
    <table id="demo" lay-filter="test"></table>

    <script src="/layui/dist/layui.js"></script>
    <script src="/layui/table/common.js"></script>
    <script>
      var table = layui.table

      table.render({
        elem: '#demo',
        cols: cols,
        data: tableData,

        /**
         * @key page
         * @brief: 是否开启分页
         * @value {boolean | string}
         * ---------------------------------
         * (T1) 值类型1
         *    false (def) 不开启
         *    true  开启
         * ---------------------------------
         * (T2) 值类型2：支持传入一个对象，里面可包含 laypage 组件所有支持的参数（jump、elem除外）
         *    layout: 字段配置分页组件各功能启用；（见下面数组中注释）
         *    prev: 字段自定义“上一页”内容；
         *    prev: 字段自定义“下一页”内容；
         *      tip: 上面2个自定义可以是文字或自定义的字体图标，也可以是图片填充；
         *    limits: 配置分页数组；
         *    limit: 默认分页数；（需要 limits 内存在，否则是数组的第一个值）
         */
        // page: false, // （默认）不开启
        // page: true, // 开启分页
        page: {
          layout: [
            'count', // 总条目数
            'prev', // 上一页的交互图标
            'page', // 快捷跳转的页码
            'next', // 下一页的交互图标
            'limit', // 每页条数 (10, 20, ..., 90)
            'refresh', // 刷新当前分页数据的图标
            'skip', // 跳页交互
          ],
          prev: '上页', // 自定义上一页交互
          next: '<span class="icon iconfont icon-jiantou_xiayiye_o"></span>', // 自定义下一页交互
          limit: 20,
          limits: [20, 40, 60],
        },
      })
    </script>
  </body>
</html>
